<template>
  <div class="signup-container">
    <el-form ref="signupForm" :model="signupForm" class="signup-form" :rules="signupRules" auto-complete="on" label-width="120px">

      <div class="title-container">
        <h3 class="title">欢迎注册Antage账号</h3>
      </div>

      <el-form-item prop="username" label="账号：">
        <el-input v-model="signupForm.username" />
      </el-form-item>
      <el-form-item prop="password1" label="密码：">
        <el-input v-model="signupForm.password1" show-password />
      </el-form-item>
      <el-form-item prop="password2" label="确认密码：">
        <el-input v-model="signupForm.password2" show-password />
      </el-form-item>
      <el-form-item>
        <el-button style="width:40%;float:right" type="primary" plain @click="onSignup">注册</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import { validSignupUsername } from '@/utils/validate'

export default {
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validSignupUsername(value)) {
        callback(new Error('Please enter the correct user name'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      console.log(value)
      console.log(this.signupForm.password1)
      if (!(value === this.signupForm.password1)) {
        callback(new Error('password not same'))
      } else {
        callback()
      }
    }
    return {
      signupForm: {
        username: '',
        password1: '',
        password2: ''
      },
      signupRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password1: [{ required: true, trigger: 'blur' }],
        password2: [{ required: true, trigger: 'blur', validator: validatePassword }]
      }
    }
  },
  methods: {
    onSignup() {
      this.$refs.signupForm.validate(valid => {
        if (valid) {
          alert('注册成功,跳转去登录页面')
          this.$router.push('/login')
        } else {
          console.log('signup error!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$bg:#F7F7F7;
$dark_gray:#889aa4;
$light_gray:#eee;

.signup-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;
}

.line{
  text-align: center;
}

.signup-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;
  }

.title-container {
    position: relative;
}

.title {
      font-size: 26px;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }

</style>
